<template>
  <div>
    <div class="panel-top">
      <div class="item-title clearfix">
        <div class="name fl">{{$t('header.nav.statistics')}}</div>
      </div>
      <div class="item-content">
        <div class="item">
          <div class="item-top">
            <spinner v-if="initPoolStatsLoading"/>
            <template v-else>
              <cu :val="hash_rate | num" :decimals="2"></cu>
              <span class="unit">PH/S</span>
            </template>
          </div>
          <div class="item-bottom">
            <span class="name">{{$t('statistics.total_rate')}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-top">
            <spinner v-if="initPoolStatsLoading"/>
            <cu v-else :val="workers_active | num" :decimals="0"></cu>
          </div>
          <div class="item-bottom">
            <span class="name">{{$t('statistics.total_work_machine')}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-top">
            <spinner v-if="initPoolStatsLoading"/>
            <template v-else>
              <cu :val="total_rewards | num" :decimals="8"></cu>
              <span class="unit">BTC</span>
            </template>
          </div>
          <div class="item-bottom">
            <span class="name">{{$t('statistics.total_dug_num')}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-top">
            <spinner v-if="initPoolStatsLoading"/>
            <cu v-else :val="total_blocks | num" :decimals="0"></cu>
          </div>
          <div class="item-bottom">
            <span class="name">{{$t('statistics.total_blocks')}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-top panel-top_2">
      <div class="item-title clearfix">
        <div class="name fl">{{$t('statistics.table_rate')}}</div>
      </div>
      <div class="item-content" v-loading="poolsPoolStats_init_loading" :element-loading-text="$t('unit.loading')">
        <echarts class="echarts" ref="echarts" :option="echartsOption" />
      </div>
    </div>
    <section>
      <div class="header">
        {{$t('statistics.luck')}}
      </div>
      <table>
        <thead>
          <tr>
            <th>3{{$t('unit.daily')}}</th>
            <th>7{{$t('unit.daily')}}</th>
            <th>30{{$t('unit.daily')}}</th>
            <th>90{{$t('unit.daily')}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <cu :val="day3.slice(0, -1) | num" :decimals="2"></cu>%</td>
            <td>
              <cu :val="day7.slice(0, -1) | num" :decimals="2"></cu>%</td>
            <td>
              <cu :val="day30.slice(0, -1) | num" :decimals="2"></cu>%</td>
            <td>
              <cu :val="day90.slice(0, -1) | num" :decimals="2"></cu>%</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section>
      <div class="header">{{$t('statistics.configuration')}}</div>
      <div class="content">
        <div class="row">
          <div class="col">
            <div class="row border"><span><i class="iconfont icon-jiedian1"></i>{{$t('statistics.info1_1')}}</span></div>
            <div class="row title" :class="language">{{$t('statistics.info1_2')}}</div>
            <div class="row">btc-bj.s.dpool.top:443</div>
            <div class="row">btc-bj.s.dpool.top:25</div>
            <div class="row">btc-bj.s.dpool.top:1800</div>
          </div>
          <div class="col">
            <div class="row border"><span><i class="iconfont icon-jiedian1"></i>{{$t('statistics.info2_1')}}</span></div>
            <div class="row title" :class="language">{{$t('statistics.info2_2')}}</div>
            <div class="row">btc-hn.s.dpool.top:443</div>
            <div class="row">btc-hn.s.dpool.top:25</div>
            <div class="row">btc-hn.s.dpool.top:1800</div>
          </div>
          <div class="col">
            <div class="row border"><span><i class="iconfont icon-jiedian1"></i>{{$t('statistics.info3_1')}}</span></div>
            <div class="row title" :class="language">{{$t('statistics.info3_2')}}</div>
            <div class="row">btc-va.s.dpool.top:443</div>
            <div class="row">btc-va.s.dpool.top:25</div>
            <div class="row">btc-va.s.dpool.top:1800</div>
          </div>
          <div class="col">
            <div class="row border"><span><i class="iconfont icon-jiedian1"></i>{{$t('statistics.info4_1')}}</span></div>
            <div class="row title" :class="language">{{$t('statistics.info4_2')}}</div>
            <div class="row">btc-eu.s.dpool.top:443</div>
            <div class="row">btc-eu.s.dpool.top:25</div>
            <div class="row">btc-eu.s.dpool.top:1800</div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="header">
        {{$t('statistics.pool_data')}}
      </div>
      <table>
        <thead>
          <tr>
            <th>{{$t('statistics.hight')}}</th>
            <th>{{$t('statistics.bjtime')}}</th>
            <th width="300px">{{$t('statistics.hash')}}</th>
            <th>{{$t('statistics.rewards')}}</th>
            <th>
              UTC0{{$t('statistics.time')}}
              <el-tooltip placement="top">
                <div slot="content" v-html="$t('statistics.time_info')"></div>
                <i class="iconfont icon-yduigantanhaokongxin pointer"></i>
              </el-tooltip>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <td>{{item.height}}</td>
            <td>{{item.created_at | utc2bj}}</td>
            <td>
              <el-tooltip placement="top" effect="light">
                <div slot="content">{{item.hash}}</div>
                <a :href="'https://btc.com/'+item.hash" target="_blank" class="pointer text-truncate">{{item.hash}}</a>
              </el-tooltip>
            </td>
            <td>{{(item.rewards / 100000000).toFixed(8)}}</td>
            <td>{{item.created_at}}</td>
          </tr>
        </tbody>
      </table>
    </section>
    <Pagination :page="page | num" :pageSize="pagesize | num" :totalCount="total_count | num" :disabled="blocksListLoading" :sizeChange="sizeChange" :currentChange="currentChange" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import Echarts from '@/components/Echarts';
import cu from '@/components/CountUp';
import Spinner from '@/components/Spinner';
import { lucky, poolStats, blocksList, poolStatsD } from '@/api';
import lang from '@/lang';
import { mapGetters } from 'vuex';
import suanLiEchartsOptions from './common/suanLiEchartsOptions';

export default {
  name: 'mill',
  components: {
    Pagination,
    cu,
    Echarts,
    Spinner,
  },
  data() {
    return {
      hash_rate: '',
      workers_active: '',
      total_rewards: '',
      total_blocks: '',
      initPoolStatsLoading: true,
      poolStatsLoading: false,
      day3: '',
      day7: '',
      day30: '',
      day90: '',
      luckyLoading: false,
      regionname: 'bj',
      page: 1,
      pagesize: 10,
      total_count: 0,
      data: [],
      blocksListLoading: false,
      timer: undefined,
      poolsPoolStats_loading: false,
      poolsPoolStats_init_loading: true,
      echartsOption: JSON.parse(JSON.stringify(suanLiEchartsOptions)),
      configuration: false,
    };
  },
  computed: {
    ...mapGetters(['language']),
  },
  created() {
    this.getPoolStats();
    this.getLucky();
    this.getBlocksList();
    this.poolsPoolStats();
    this.timer = setInterval(() => {
      this.getPoolStats();
      this.getLucky();
      this.getBlocksList();
      this.poolsPoolStats();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    toggleEchartsLang() {
      this.echartsOption.legend.data[0] = lang.t('home.force');
      this.echartsOption.yAxis[0].name = lang.t('home.force');
      this.echartsOption.series[0].name = lang.t('home.force');
      if (this.$refs.echarts) {
        this.$refs.echarts.setOption(this.echartsOption);
      }
    },
    poolsPoolStats() {
      if (this.poolsPoolStats_loading) {
        return;
      }
      this.poolsPoolStats_loading = true;
      poolStatsD().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.echartsOption.xAxis.data = data.tm;
          this.echartsOption.yAxis[0].name = `${lang.t('home.force')}(${
            data.unit
          }H/S)`;
          this.echartsOption.series[0].data = data.sl;
          this.echartsOption.tooltip.formatter = v =>
            `${lang.t('statistics.time')}：${v[0].axisValue}<br/>${
              v[0].marker
            } ${lang.t('home.force')}：${v[0].data} ${data.unit}H/S`;
          if (this.$refs.echarts) {
            this.$refs.echarts.setOption(this.echartsOption);
          }
        }
        this.poolsPoolStats_loading = false;
        this.poolsPoolStats_init_loading = false;
      }).catch(() => {
        this.$message.error(lang.t('error.catchError'));
        this.poolsPoolStats_loading = false;
        this.poolsPoolStats_init_loading = false;
      });
    },
    getBlocksList() {
      if (this.blocksListLoading) {
        return;
      }
      this.blocksListLoading = true;
      blocksList({
        regionname: this.regionname,
        page: this.page,
        pagesize: this.pagesize,
      }).then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.data = data.list;
          this.total_count = data.total_count;
        }
        this.blocksListLoading = false;
      }).catch(() => {
        this.blocksListLoading = false;
      });
    },
    getPoolStats() {
      if (this.poolStatsLoading) {
        return;
      }
      this.poolStatsLoading = true;
      poolStats().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.hash_rate = data.hash_rate;
          this.workers_active = data.workers_active;
          this.total_rewards = (data.total_rewards / 100000000).toFixed(8);
          this.total_blocks = data.total_blocks;
        }
        this.poolStatsLoading = false;
        this.initPoolStatsLoading = false;
      }).catch(() => {
        this.poolStatsLoading = false;
        this.initPoolStatsLoading = false;
      });
    },
    getLucky() {
      if (this.luckyLoading) {
        return;
      }
      this.luckyLoading = true;
      lucky().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          this.day3 = data.day3;
          this.day7 = data.day7;
          this.day30 = data.day30;
          this.day90 = data.day90;
        }
        this.luckyLoading = false;
      }).catch(() => {
        this.luckyLoading = false;
      });
    },
    sizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getBlocksList();
    },
    currentChange(page) {
      this.page = page;
      this.getBlocksList();
    },
  },
  watch: {
    language: {
      handler() {
        this.toggleEchartsLang();
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.title{
  &.en{
    visibility: hidden;
  }
}
</style>
